<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字特效</title>
<style>
 /****loading加载*****/
.loading_cover{
	width: 100%;
	height:100%;
	position: fixed;
	z-index:99999;
	background: #f5f5f9;
}
/****圆形加载****/
@keyframes moveover {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
.box{
  position:relative;
  width:100px;
  height:100px;
  /*整体旋转*/
  animation:moveover 3s linear infinite;
  margin:-110px auto;
  overflow: hidden;
  position: relative;
}
.box1{
  position:absolute;
  width: 50px;
  height: 100px;
  border-radius:50px 0 0 50px;
  /* 起始最深颜色为 #999，过渡到中间颜色为 #d0cfcf */
  background: linear-gradient(#999, #008ED9);
  background-color: red;
  z-index:2;
}
.box2{
  position:absolute;
  width: 50px;
  height: 100px;
  border-radius:0 50px 50px 0;
  left:50%;
  /* 过渡到中间颜色为 #d0cfcf 最终末尾颜色为 #eee */
  background: linear-gradient(#eee,#008ED9);
  z-index:1;
}
.box3{
  position:absolute;
  width:92px;
  height:92px;
  top:4px;
  left:4px;
  border-radius:50%;
  background-color: #fff;
  z-index:2;
}
.box-font{
	width: 100px;
	height: 100px;
	position: relative;
	margin: 10px auto;
	text-align: center;
	line-height: 100px;
	z-index: 999;
	font-size: 1.2rem;
	color:#E9ECED;
}

 /*文字上色*/
.box-font::before{
    content:attr(data-letters);
    position:absolute;
    width:0;
    z-index:2;
    color:#008ED9;
    overflow:hidden;
    white-space: nowrap;
    animation:textToColor 1.5s linear infinite;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;

}
@keyframes textToColor{
            0%{
                width:0;
            }
            100%{
                width:56%;
            }
}
</style>
</head>
<body>
<div class="loading_cover">
       <div class="box-font" data-letters="加载中">加载中</div>
       <div class='box'>
		    <div class="box1"></div>
		    <div class="box2"></div>
		    <div class="box3"></div>
		</div>
</div>
</body>
